import './index.less'
import { IconExclamationCircle, IconRight } from '@arco-design/web-react/icon';
import { getImage } from '@/tools'

const list = [
  {
    title: '热门榜',
    icon: <IconExclamationCircle />,
    chv: [{
      title: '交易对',
      chv: [
        {
          img: '1',
          btc: 'BTC',
          coin: 'USDT'
        }
      ]
    }, {
      title: '最新价',
      fx: 'right',
      chv: [{ amt: '3229.22' }]
    }, {
      title: '24HH涨跌幅',
      chv: [{ zf: '-2.11%', color: '1' }]
    }]
  },
  {
    title: '热门榜',
    icon: '',
    chv: [{
      title: '交易对',
      chv: [
        {
          img: '1',
          btc: 'BTC',
          coin: 'USDT'
        }
      ]
    }, {
      title: '最新价',
      fx: 'right',
      chv: [{ amt: '3229.22' }]
    }, {
      title: '24HH涨跌幅',
      chv: [{ zf: '2.11%', color: '2' }]
    }]
  },
  {
    title: '热门榜',
    icon: '',
    chv: [{
      title: '交易对',
      chv: [
        {
          img: '1',
          btc: 'BTC',
          coin: 'USDT'
        }
      ]
    }, {
      title: '最新价',
      fx: 'right',
      chv: [{ amt: '3229.22' }]
    }, {
      title: '24HH涨跌幅',
      chv: [{ zf: '-2.11%', color: '1' }]
    }]
  },
  {
    title: '热门榜',
    icon: '',
    chv: [{
      title: '交易对',
      chv: [
        {
          img: '1',
          btc: 'BTC',
          coin: 'USDT'
        }
      ]
    }, {
      title: '最新价',
      fx: 'right',
      chv: [{ amt: '3229.22' }]
    }, {
      title: '24HH涨跌幅',
      chv: [{ zf: '2.11%', color: '2' }]
    }]
  },
]

function MarketTabs() {
  return (
    <div className='market-flex-box'>
      {
        list?.map((res, index) => {
          return (
            <div key={index} className='market-flex-item'>
              <div className='market-flex-text'>
                <div className='market-flex-title'>{res?.title}</div>
                <div className='market-flex-icon  flex-icon '>{res?.icon}</div>
                <div className='market-flex-icon flex-icon-size'><IconRight /></div>
              </div>

              <div className='req-flex'>
                {
                  res?.chv?.map((req, indexs) => {
                    return (
                      <div key={indexs}>
                        <div className='req-flex-title'>
                          <div className={req?.fx ? 'req-flex-right' : ''}>
                            {req.title}
                          </div>

                          <div>
                            {
                              req?.chv?.map((reqs, indexq) => {
                                return (
                                  <div key={indexq}>
                                    <div className='flex-reqs'>
                                      <div className='req-flex-img'>
                                        {
                                          reqs?.img && <img src={getImage('market', 'b.png')} alt="" />
                                        }
                                      </div>
                                      <div className='flex-reqs-btc'>
                                        <span className='flex-reqs-text'>{reqs?.btc}</span>
                                        <span className='flex-reqs-me'>{reqs?.coin ? `/${reqs?.coin}` : ''} </span>
                                      </div>
                                      <div className='flex-reqs-amt'>
                                        {reqs?.amt}
                                      </div>
                                      <div className={reqs?.color === '2' ? 'flex-reqs-color' : 'flex-reqs-red'}>
                                        {reqs?.zf}
                                      </div>
                                    </div>
                                  </div>
                                )
                              })
                            }
                          </div>
                        </div>
                      </div>
                    )
                  })
                }
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

export default MarketTabs